/**
 * @description 拆分后的交易流水组件
 * @author wangjianjun
 */

import React, { PropTypes, PureComponent, Fragment } from 'react';
import { PrimaryC, DATA_ENTRY, AdvancedSearch, FirstHeaderC, TableC } from '../../../../comps';
import uuid from 'es6-uuid';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, InputNumber, Button, message, Table, Divider, DatePicker, Select, Modal, Popconfirm } from 'antd';
import styles from '../index.less';
const confirm = Modal.confirm;
import { connect } from 'dva';
import 'moment/locale/zh-cn';

@Form.create()
@connect(({ survivalManageM, initialSplitM, loading }) => ({
  survivalManageM,
  initialSplitM,
  loading: loading.effects['survivalManageM/getTransactionFlow'],
}))
export default class TransactionFlow extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      columns: [],
      onRef: () => {},
    };
  }

  componentDidMount() {
    const { type } = this.props;

    if (this.props.dataSource) {
      this.setState({
        dataSource: [...this.props.dataSource],
      });
    }
    if (this.props.columns) {
      this.setState({
        columns: _.cloneDeep(this.props.columns),
      });
    }
    type == '3' || type == '4' ? this.props.onRef(this) : null;
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.dataSource) !== JSON.stringify(this.props.dataSource)) {
      this.setState({
        dataSource: nextProps.dataSource,
      });
    }
    if (JSON.stringify(nextProps.columns) !== JSON.stringify(this.props.columns)) {
      this.setState({
        columns: _.cloneDeep(nextProps.columns),
      });
    }
  }
  returnData() {
    for (let index = 0; index < this.state.dataSource.length; index++) {
      const element = this.state.dataSource[index];
      if (element.editable == true) {
        message.warning('表格存在未保存的数据!');
        return;
      }
    }

    return this.state.dataSource;
  }

  //新增一条
  add = () => {
    const { data } = this.props;
    let dataSource = this.state.dataSource ? this.state.dataSource : [];
    for (let index = 0; index < this.state.dataSource.length; index++) {
      const element = this.state.dataSource[index];
      if (element.editable == true) {
        message.warning('表格存在未保存的数据!');
        return;
      }
    }
    const newData = dataSource.map((item) => ({ ...item }));

    const addData = {
      id: uuid(32),
      aid: data.aid, //aid相等的才可以操作,和用来算已经分配比例
      allocation: undefined, //可用现金或者持仓数量
      editable: true,
      newAdd: true,
      buyRate: data.buyRate || data.buyRate == 0 ? data.buyRate : '--',
      secuName: data.secuName ? data.secuName : '--',
      secuCode: data.secuCode ? data.secuCode : '--',

      tradeMarket: data.tradeMarket ? data.tradeMarket : '--',
      tradeMarketName: data.tradeMarketName ? data.tradeMarketName : '--',

      tradeDir: data.tradeDir ? data.tradeDir : '--',
      tradeDirDesc: data.tradeDirDesc ? data.tradeDirDesc : '--',

      tradeType: data.tradeType ? data.tradeType : '--',
      tradeTypeName: data.tradeTypeName ? data.tradeTypeName : '--',

      tradePrice: data.tradePrice || data.tradePrice == 0 ? data.tradePrice : '--',
      // tradeAmount:(data.tradeAmount || data.tradeAmount==0)?data.tradeAmount:'--',
      enFareTotal: data.enFareTotal || data.enFareTotal == 0 ? data.enFareTotal : '--',
      enFare1: data.enFare1 || data.enFare1 == 0 ? data.enFare1 : '--',
      enFare2: data.enFare2 || data.enFare2 == 0 ? data.enFare2 : '--',
      enFare3: data.enFare3 || data.enFare3 == 0 ? data.enFare3 : '--',
      enFare4: data.enFare4 || data.enFare4 == 0 ? data.enFare4 : '--',
      enFare5: data.enFare5 || data.enFare5 == 0 ? data.enFare5 : '--',
      enFare6: data.enFare6 || data.enFare6 == 0 ? data.enFare6 : '--',
      enFare7: data.enFare7 || data.enFare7 == 0 ? data.enFare7 : '--',
      enFeeJs2: data.enFeeJs2 || data.enFeeJs2 == 0 ? data.enFeeJs2 : '--',
      enFeeJg: data.enFeeJg || data.enFeeJg == 0 ? data.enFeeJg : '--',
    };
    newData.unshift(addData);
    this.setState({ dataSource: newData });
  };
  //保存和编辑切换
  toggleEditable = (e, record, save) => {
    const { data } = this.props;
    e.preventDefault();
    const { dataSource } = this.state;
    let newData = dataSource.map((item) => ({ ...item }));
    let flag = true;
    let totaltradeNum = 0;
    // 保存的时候检查必填和交易数量要为正整数和数量比较
    if (save == 'save') {
      const checkMap = ['productCode-产品代码', 'productName-账户名称', 'tradeNum-交易数量'];
      const reg = /^\+?[1-9]\d*$/;
      newData.map((item) => {
        //必填项校验
        if ((item.id && item.id === record.id) || (item.uid && item.uid === record.uid)) {
          checkMap.map((element) => {
            const arr = element.split('-');
            if (!item[arr[0]]) {
              flag = false;
              message.error(`请填写${arr[1]}`);
              return;
            }
          });
        }
        if (item.aid && item.aid == record.aid && item.tradeDir && item.tradeDir == record.tradeDir) {
          //总数量比较 前提是方向 证券代码 交易市场一致
          totaltradeNum = Number(item.tradeNum) ? totaltradeNum + Number(item.tradeNum) : totaltradeNum;
        }
      });
    }
    if (totaltradeNum > data.tradeTotalNum) {
      flag = false;
      message.warning('交易数量总和要小于总交易数量!');
    }

    //状态切换
    if (flag) {
      newData.map((item) => {
        if ((item.id && item.id === record.id) || (item.uid && item.uid === record.uid)) {
          //手动拆分
          item.editable = !item.editable;
          item.newAdd = false;
        }
      });
      this.setState({
        dataSource: [...newData],
      });

      if (save == 'save') {
        const fpRate = this.calcRate(data, newData);
        this.props.cfRate(fpRate); //传给父组件
        if (this.props.type == '3') {
          const handleData = _.cloneDeep(newData).map((item) => {
            //手工拆分需要id 去掉uid
            item.id = uuid(32);
            delete item.uid;
            return item;
          });
          this.props.changeSplitType(JSON.stringify(handleData)); //智能拆分点击保存则修改为手动拆分 智能拆分置灰
        }
      }
    }
  };

  //计算已分配比例 rowData {} 是当前行的数据 listData是弹窗底部拆分表格的数组
  calcRate = (rowData, listData) => {
    let fpTradeNum = 0;
    let fpRate = '0.0000%';
    listData.map((item) => {
      if (item.editable == false) {
        //取非标记状态的 且交易市场和资产代码 交易方向相等的数据
        if (item.aid && item.aid == rowData.aid && item.tradeDir && item.tradeDir == rowData.tradeDir) {
          fpTradeNum = Number(item.tradeNum) ? fpTradeNum + Number(item.tradeNum) : fpTradeNum;
        }
      }
    });
    fpRate = ((fpTradeNum / rowData.tradeTotalNum) * 100).toFixed(4);
    return fpRate;
  };
  //删除
  remove(record) {
    const { data } = this.props;
    const newData = this.state.dataSource.filter((item) => {
      if (item.id) {
        return item.id != record.id;
      }
      if (item.uid) {
        return item.uid != record.uid;
      }
    });
    this.setState({ dataSource: newData });
    const fpRate = this.calcRate(data, newData);
    this.props.cfRate(fpRate); //传给父组件
  }

  //input的onChange事件，填写值
  handleFieldChange(e, fieldName, record) {
    const { data } = this.props;
    if (!e) return;
    let dataSource = this.state.dataSource ? this.state.dataSource : [];
    const newData = dataSource.map((item) => ({ ...item }));
    if (fieldName == 'tradeNum') {
      var rate = (e.target ? e.target.value * 1 : 0) / data.tradeTotalNum; //当前数量/总交易数量 比例
    }
    newData.map((item) => {
      if ((item.id && item.id === record.id) || (item.uid && item.uid === record.uid)) {
        item[fieldName] = e.target ? e.target.value : e;
        item['tradeAmount'] = Number(e.target ? e.target.value : e) * Number(data.tradeUnitPrice); //tradeUnitPrice总价除以数量
        item.enFareTotal = data.enFareTotal ? rate * data.enFareTotal * 1 : data.enFareTotal == 0 ? 0 : undefined;
        item.enFare1 = rate * data.enFare1 ? rate * data.enFare1 : data.enFare1 == 0 ? 0 : undefined;
        item.enFare2 = rate * data.enFare2 ? rate * data.enFare2 : data.enFare2 == 0 ? 0 : undefined;
        item.enFare3 = rate * data.enFare3 ? rate * data.enFare3 : data.enFare3 == 0 ? 0 : undefined;
        item.enFare4 = rate * data.enFare4 ? rate * data.enFare4 : data.enFare4 == 0 ? 0 : undefined;
        item.enFare5 = rate * data.enFare5 ? rate * data.enFare5 : data.enFare5 == 0 ? 0 : undefined;
        item.enFare6 = rate * data.enFare6 ? rate * data.enFare6 : data.enFare6 == 0 ? 0 : undefined;
        item.enFare7 = rate * data.enFare7 ? rate * data.enFare7 : data.enFare7 == 0 ? 0 : undefined;
        item.enFeeJs2 = rate * data.enFeeJs2 ? rate * data.enFeeJs2 : data.enFeeJs2 == 0 ? 0 : undefined;
        item.enFeeJg = rate * data.enFeeJg ? rate * data.enFeeJg : data.enFeeJg == 0 ? 0 : undefined;
      }
    });
    this.setState({
      dataSource: newData,
    });
  }

  //select的onChange事件，填写值
  handleFieldChange1(e, fieldName, record) {
    if (!e) return;
    let dataSource = this.state.dataSource ? this.state.dataSource : [];
    const newData = dataSource.map((item) => ({ ...item }));
    newData.map((item) => {
      if (item.id === record.id) {
        item['pid'] = e.split('|')[0];
        item['productCode'] = e.split('|')[1];
        item['productName'] = e.split('|')[2];
        item['allocation'] = e.split('|')[3];
      }
    });
    this.setState({
      dataSource: newData,
    });
  }
  showTable = () => {
    const { type, data } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { productList } = this.props;
    //（1）使用场景
    // 1-获取真实交易流水拆分后的交易流水
    // 2-获取子产品下拆分后的交易流水
    // 3-针对某一真实交易进行智能拆分 （这种情况下，有操作列）
    // 4-针对某一真实交易进行手工拆分（这种情况下，有新增按钮和操作列）

    if (this.state.columns) {
      this.state.columns.map((item) => {
        if (item.key == 'secuName' && type > 2) {
          item.ellipsis = true; //设置省略 要不固定操作列显示会有问题 针对拆分弹窗里的显示修改
        }

        //无需操作列的 场景
        if (type < 3) {
          item.width = parseFloat(100 / this.state.columns.length) + '%';
        }

        if (item.key == 'tradeNum') {
          item.align = 'right';
          if (type == 1) {
            item.type = 'number';
            item.toFixed = 2;
          }
        }

        if (item.key == 'buyRate') {
          item.type = 'rate';
          item.toFixed = 4;
        }
        if (
          item.key == 'tradePrice' ||
          item.key == 'tradeAmount' ||
          item.key == 'allocation' ||
          item.key == 'enFareTotal' ||
          item.key == 'enFare1' ||
          item.key == 'enFare2' ||
          item.key == 'enFare3' ||
          item.key == 'enFare4' ||
          item.key == 'enFare5' ||
          item.key == 'enFare6' ||
          item.key == 'enFare7' ||
          item.key == 'enFeeJs2' ||
          item.key == 'enFeeJg'
        ) {
          item.type = 'money';
          if (item.key == 'tradePrice') {
            item.toFixed = 4;
          }
        }
      });
    }

    if (type == '3' || type == '4') {
      this.state.columns &&
        this.state.columns.map((item) => {
          if (item.key == 'tradeNum') {
            item.render = (text, record) => {
              if (record.editable) {
                return <InputNumber style={{ width: '112px' }} value={text} onChange={(e) => this.handleFieldChange(e, 'tradeNum', record)} precision={2} key={record.id} />;
              } else {
                return text !== null || text !== undefined ? Number(text).toFixed(2) : '--';
              }
            };
          }
        });

      if (type == '4') {
        this.state.columns.map((item) => {
          if (item.key == 'productCode') {
            item.render = (text, record) => {
              if (record.editable && record.newAdd) {
                return (
                  <Select key={record.id} onChange={(e) => this.handleFieldChange1(e, 'productCode', record)} style={{ width: '112px' }}>
                    {productList &&
                      productList.map((item) => (
                        <Select.Option value={`${item.pid}|${item.productCode}|${item.productName}|${item.allocation}`} key={item.productCode}>
                          {item.productCode}
                        </Select.Option>
                      ))}
                  </Select>
                );
              } else {
                return text;
              }
            };
          }
        });

        this.state.columns.map((item) => {
          if (item.key == 'productName') {
            item.render = (text, record) => {
              if (record.editable && record.newAdd) {
                return <Input disabled style={{ width: '112px' }} value={text} key={record.id} />;
              } else {
                return text;
              }
            };
          }
        });
      }
      if (this.state.columns && this.state.columns.length > 0 && this.state.columns[this.state.columns.length - 1].key != 'id') {
        this.state.columns.push({
          title: '操作',
          dataIndex: 'id',
          key: 'id',
          fixed: type == '4' ? undefined : 'right',
          width: 105,
          render: (text, record) => {
            if (record && record.aid && record.aid == data.aid) {
              if (record.tradeDir != record.tradeDir) return null;
              if (record.editable) {
                return (
                  <span>
                    <span style={{ color: '#4D86FF', cursor: 'pointer' }} onClick={(e) => this.toggleEditable(e, record, 'save')}>
                      保存
                    </span>
                    <Divider type='vertical' />
                    <Popconfirm title='是否要删除此行？' onConfirm={() => this.remove(record)}>
                      <span style={{ color: '#4D86FF', cursor: 'pointer' }}>删除</span>
                    </Popconfirm>
                  </span>
                );
              } else {
                return (
                  <span>
                    <span style={{ color: '#4D86FF', cursor: 'pointer' }} onClick={(e) => this.toggleEditable(e, record, 'edit')}>
                      编辑
                    </span>
                    <Divider type='vertical' />
                    <Popconfirm title='是否要删除此行？' onConfirm={() => this.remove(record)}>
                      <span style={{ color: '#4D86FF', cursor: 'pointer' }}>删除</span>
                    </Popconfirm>
                  </span>
                );
              }
            } else {
              return null;
            }
          },
        });
      }
    }

    if (this.state.columns && type == '3') {
      for (var i = 0; i < this.state.columns.length; i++) {
        if (this.state.columns[i].key === 'buyRate') {
          this.state.columns.splice(i, 1);
        }
      }
    }
    this.state.columns &&
      this.state.columns.map((item) => {
        if (item.key !== 'id' && type > 2) {
          if (type == 4) {
            item.width = parseFloat(parseFloat(85 / (this.state.columns.length - 1)) * 1030) / 100;
          } else {
            item.width = parseFloat(parseFloat(96 / (this.state.columns.length - 1)) * 2950) / 100;
          }
        }
      });

    return (
      <TableC
        columns={this.state.columns}
        dataSource={this.state.dataSource}
        loading={this.props.loading}
        hidePage={true}
        rowKey={'id'}
        noDataHeight='126px'
        scroll={{ x: type == 2 ? (this.state.columns.length > 20 ? 2950 : 1500) : type == 4 ? '100%' : 2920, y: 210 }} //type=2时columns比较少 宽度做调整  type=4 不需要滚动 columns较少
      />
    );
  };
  render() {
    //（1）使用场景
    // 1-获取真实交易流水拆分后的交易流水
    // 2-获取子产品下拆分后的交易流水
    // 3-针对某一真实交易进行智能拆分 （这种情况下，有操作列）
    // 4-针对某一真实交易进行手工拆分（这种情况下，有新增按钮和操作列）
    return (
      <div style={{width:'100%'}}>
        {this.props.type == '4' && <PrimaryC title='增加' style={{ margin: '10px' }} onClick={() => this.add()} />}
        {this.showTable()}
      </div>
    );
  }
}
